<template>
  <view class="nav" :style="{ backgroundColor: backColor}">
    <view class="arrow" @click="goBack">
      <!-- <uni-icons v-if="showArrow" type="arrowleft" :color="color" size="20" class="arrow-icon"></uni-icons> -->
			<image src="/static/images/backwhite.png" class="back-img" mode=""></image>
    </view>
    <view  class="head" :style="{color: color}">{{ head }}</view>
  </view>
</template>

<script>
export default {
  name: "NavCom",
  props: {
    backUrl: {
      type: String,
      default: null
    },
    backColor: {
      type: String,
      default: null
    },
    showArrow: {
      type: Boolean,
      default: true
    },
    color: {
      type: String,
      default: '#FFFFFF'
    },
    head: {
      type: String,
      default: ''
    }
  },
  methods: {
    goBack() {
      if (this.backUrl) {
        uni.switchTab({url: this.backUrl})
        uni.navigateTo({url: this.backUrl})
      } else {
        uni.navigateBack()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.nav {
  width: 530rpx;
  position: fixed;
  top: 20rpx;
  z-index: 99999;
  padding: 50rpx 15rpx 15rpx 15rpx;
  display: flex;
  align-items: center;
  font-size: 28rpx;
  .arrow {
    width: 50rpx;
    height: 50rpx;
    background: black;
    background:rgba(0,0,0,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
		justify-content: center;
		.back-img{
			display: block;
			width: 32rpx;
			height: 32rpx;
		}
		.arrow-icon{
			display: flex;
			align-items: center;
			justify-content: center;
		}
  }
  .head {
    margin-left: 20rpx;
  }
}
</style>
